<template>
  <div class="payment-container">
    <!-- 支付头部 -->
    <div class="payment-header">
      <div class="header-title">支付群费</div>
      <div class="header-subtitle">>和平精英交流群</div>
    </div>

    <!-- 金额显示 -->
    <div class="amount-section">
      <div class="amount-label">支付金额</div>
      <div class="amount-desc">一次性支付，永久进群权限</div>
    </div>

    <!-- 支付方式 -->
    <div class="payment-method">
      <h3>选择支付方式</h3>
      <div class="methods-list">
        <div class="method-item" :class="{ active: selectedMethod === 'wechat' }" @click="selectMethod('wechat')">
          <div class="method-icon wechat"></div>
          <div class="method-name">微信支付</div>
          <div class="method-check" v-if="selectedMethod === 'wechat'"></div>
        </div>
        <!-- <div class="method-item" :class="{ active: selectedMethod === 'alipay' }" @click="selectMethod('alipay')">
          <div class="method-icon alipay"></div>
          <div class="method-name">支付宝</div>
          <div class="method-check" v-if="selectedMethod === 'alipay'"></div>
        </div> -->
      </div>
    </div>

    <!-- 二维码区域 -->
    <div class="qr-code-section">
		<h3>扫描二维码支付</h3>
      <div class="qr-code-container">
        <!-- <canvas canvas-id="qrCodeCanvas" class="qr-code-canvas"></canvas> -->
		<img src="./img/8bdb5e89182743cf61129e13809b37e8.jpg" alt="二维码图片" width="200" height="250" />
        <div class="qr-code-tip">请使用{{ selectedMethod === 'wechat' ? '微信' : '支付宝' }}扫描上方二维码</div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <!-- <div class="action-buttons">
      <button class="btn-primary" @click="confirmPayment">确认支付</button>
      <button class="btn-secondary" @click="goBack">取消</button>
    </div> -->

    <!-- 链接复制区域 -->
    <!-- <div class="link-section">
      <div class="link-label">支付链接</div>
      <div class="link-value">{{ paymentLink }}</div>
      <button class="copy-btn" @click="copyLink">复制链接</button>
    </div> -->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  name: 'Payment',
  data() {
    return {
      selectedMethod: 'wechat',
      // paymentLink: 'https://example.com/pay/123456789',
      qrCodeUrl: ''
    }
  },
  methods: {
    selectMethod(method) {
      this.selectedMethod = method
      // this.generateQRCode()
    },
    generateQRCode() {
      // 在实际项目中，这里会根据选择的支付方式生成对应的支付二维码
      const qrCodeContent = this.paymentLink
      // eslint-disable-next-line no-unused-vars
      const qrCodeElement = new QRCode(this.$refs.qrCodeCanvas, {
        text: qrCodeContent,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    confirmPayment() {
      // 模拟支付确认
      alert('请使用' + (this.selectedMethod === 'wechat' ? '微信' : '支付宝') + '扫描二维码完成支付')
      // 实际项目中这里会跳转到支付结果页面或进行支付状态轮询
    },
    copyLink() {
      // 复制支付链接到剪贴板
      const textArea = document.createElement('textarea')
      textArea.value = this.paymentLink
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
      alert('链接已复制到剪贴板')
    },
    goBack() {
      this.$router.push('/')
    }
  },
  mounted() {
    // 页面加载时生成默认支付方式的二维码
    // this.generateQRCode()
  }
}
</script>

<style scoped>
.payment-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.payment-header {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.header-subtitle {
  font-size: 14px;
  color: #666;
}

.amount-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.amount-label {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.amount-value {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.amount-desc {
  font-size: 14px;
  color: #999;
}

.payment-method,
.qr-code-section,
.link-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-method h3,
.qr-code-section h3,
.link-section h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
  text-align: center; 
}

.methods-list {
  display: flex;
  gap: 20px;
}

.method-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.method-item.active {
  border-color: #1989fa;
  background-color: #f0f7ff;
}

.method-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
}

.method-icon.wechat {
  background-color: #07c160;
}

.method-icon.alipay {
  background-color: #1677ff;
}

.method-name {
  font-size: 16px;
  color: #333;
}

.method-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-color: #1989fa;
  border-radius: 50%;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-code-canvas {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.qr-code-tip {
  font-size: 14px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.btn-primary,
.btn-secondary {
  flex: 1;
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #1989fa;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0e77d3;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}

.btn-secondary:hover {
  background-color: #e0e0e0;
}

.link-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.link-value {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  word-break: break-all;
  margin-bottom: 10px;
}

.copy-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.copy-btn:hover {
  background-color: #e0e0e0;
}
</style>